<template>
  <BasicModal title="历史计价" v-bind="$attrs" @ok="handleOk" @register="registerModal">
    <BasicTable @register="registerTable">
      <template #detail>
        <SettlementDetailTable :source-data="{}" />
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicColumn, BasicTable, useTable } from '@/components/Table';
  import SettlementDetailTable from '@/views/order/salesOrder/components/SettlementDetailTable.vue';

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      width: 1100,
    });
    console.log('data......', data);
  });
  const columns: BasicColumn[] = [
    { title: '时间', dataIndex: 'createTime' },
    { title: '角色', dataIndex: 'role' },
    { title: '提价人', dataIndex: 'quotationName' },
    { width: 600, title: '结算明细', dataIndex: 'detail', slots: { customRender: 'detail' } },
    { title: '备注', dataIndex: 'remark' },
  ];
  const [registerTable] = useTable({
    columns,
    striped: false,
    bordered: false,
    canResize: false,
    scroll: { x: 888 },
    showIndexColumn: false,
  });

  const emits = defineEmits(['ok']);
  function handleOk() {
    emits('ok');
  }
</script>

<style scoped lang="less"></style>
